<template>
  <div class="padding-t-20 scrollbar">
    <q-table
      class="scroll scroll-table myTable inherit"
      style="max-height: 500px;margin: 0"
      :columns="tableColumns"
      :data="tableData"
      row-key="id"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      color="primary"
      :hide-bottom="tableData.length !== 0"
      :loading="isTableLoading"
    >
      <template v-slot:body-cell-id="props">
        <q-td style="width: 220px">
          <div class="inline-block" style="width: 20px">
            <i style="font-size: 14px" class="iconfont icontubiao-10 text-primary" v-if="props.row.isCombinedWorkOrder" />
          </div>
          <q-btn flat color="primary" :label="props.row.id" @click="toOrderList(props.row.id)" />
        </q-td>
      </template>
      <template v-slot:body-cell-materialNames="props">
        <q-td :props="props">
          <data-list :is-combined-work-order="props.row.isCombinedWorkOrder" title="产品名称" :data-list="props.row.materialNames"/>
        </q-td>
      </template>
      <template v-slot:body-cell-productStandard="props">
        <q-td :props="props">
          <data-list :is-combined-work-order="props.row.isCombinedWorkOrder" isSpec title="产品规格" :data-list="props.row.productSpecs"/>
        </q-td>
      </template>
      <template v-slot:body-cell-orderStatus="props">
        <q-td>
          <div>
            <div class="status"
                 :style="{backgroundColor: judgeStatus(props.row.orderStatus, 'color' ,props.row.isSuspend)}" />
            <span>{{ judgeStatus(props.row.orderStatus, 'name', props.row.isSuspend) }}</span>
          </div>
        </q-td>
      </template>
    </q-table>
    <!--  分页-->
    <pagination v-model="pagination.page"
                :page-size="pagination.rowsPerPage"
                :total="pagination.rowsNumber"
                @changePageSize="onPageSizeChange"
                @changePage="onPageChange"
                style="padding-right: 44px;position: initial" />
  </div>
</template>

<script>
import Pagination from 'src/components/pagination/index'
import { getWorkOrders } from 'src/boot/tpm/equipment-record'
import moment from 'moment'
import _ from 'lodash'
import dataList from '../../../job/components/work-order/detail-list'
export default {
  name: 'process-order',
  components: {
    Pagination,
    dataList
  },
  props: {
    data: Object
  },
  data () {
    return {
      isTableLoading: false,
      // 表格分页配置
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      id: null,
      // 表格列
      tableColumns: [
        { name: 'id', label: '工单编号', field: 'id', align: 'left' },
        { name: 'materialNames', field: 'materialNames', label: '产品名称', align: 'left' },
        { name: 'productStandard', label: '产品规格', field: 'productStandard', align: 'left' },
        { name: 'processName', field: 'processName', label: '加工工序', align: 'left' },
        { name: 'startTime', field: 'startTime', label: '计划开工时间', align: 'left' },
        { name: 'orderStatus', field: 'orderStatus', label: '工单状态', align: 'left' },
        { name: 'shiftName', field: 'shiftName', label: '加工班次', align: 'left' },
        { name: 'operator', field: 'operator', label: '操作员', align: 'left' }
      ],
      tableData: [],
      status: {}
    }
  },
  watch: {
    data: {
      handler (val) {
        if (val.id !== this.id) {
          this.id = val.id
          this.pagination.page = 1
          this.pagination.rowsPerPage = 15
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 跳转列表
    toOrderList (order) {
      this.$router.push({
        name: 'processOrder',
        params: {
          orderId: order,
          workshopId: this.data.workshopId
        }
      })
    },
    initData () {
      const status = Object.entries(this.Enums.BUSINESS_STATUS)
        .filter(entry => entry[1].workOrder)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc,
            color: entry[1].color
          }
        })
      this.status = status
    },
    getList () {
      let params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        deviceTreeReqVO: {
          deviceIds: [this.id]
        }
      }
      this.isTableLoading = true
      getWorkOrders(params).then(res => {
        res.list.forEach(item => {
          item.id = item.groupId
          item.processName = `${item.isCombinedWorkOrder ? '' : (item.processSort + 1) + '-'}${this.$utils.label(item.processName)}`
          item.materialNumber = this.$utils.label(item.materialNumber)
          item.materialName = _.join(item.materialNames, '、')
          item.shiftName = this.$utils.label(item.shiftName)
          item.operator = this.$utils.label(item.operator)
          item.startTime = moment(item.startTime).format('YYYY-MM-DD HH:mm:ss')
        })
        this.tableData = res.list
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    // 过滤状态枚举
    judgeStatus (statusCode, type, bool) {
      let statusCodeNew = statusCode
      if (bool) {
        statusCodeNew = 13
      }
      if (type === 'name') {
        const name = this.status.find(o => o.value === statusCodeNew).label
        return name
      } else {
        const color = this.status.find(o => o.value === statusCodeNew).color
        return color
      }
    },
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">
  >>>.pagination{
    &:after {
      content ''
      display block
      clear both
    }
  }
</style>
